<template>
  <div class="footer">
    <el-row class="row-bg" justify="space-around">
      <el-col :lg="6" :xs="12" :md="6"><div>广东备案号</div></el-col>
      <el-col :lg="6" :xs="12" :md="6"><div>鲤鱼</div></el-col>
      <el-col :lg="6" :xs="24" :md="6">
        <el-popover placement="top" trigger="hover">
          <template #reference>
            <icon-park type="tencent-qq" size="25" theme="filled" fill="#105de0" />
          </template>
          <el-image
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="cover"
          ></el-image>
        </el-popover>
        <el-popover placement="top" trigger="hover">
          <template #reference>
            <icon-park type="wechat" size="25" theme="filled" fill="#6bf040" />
          </template>
          <el-image
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="cover"
          ></el-image>
        </el-popover>
        <el-popover placement="top" trigger="hover">
          <template #reference>
            <icon-park type="weixin-mini-app" size="25" theme="filled" fill="#1ffa14" />
          </template>
          <el-image
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="cover"
          ></el-image>
        </el-popover>
        <el-link target="_blank" href="https://github.com/">
          <icon-park type="github" size="25" theme="filled" fill="#395c9e" />
        </el-link>
      </el-col>
      <el-col :lg="6" :xs="24" :md="6">
        邮箱&nbsp;&nbsp;&nbsp;
        <el-link type="primary" :underline="false" href="mailto:bestvist@qq.com">
          2785445847@qq.com
        </el-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { IconPark } from "@icon-park/vue-next/es/all";
export default {
  components: {
    IconPark,
  },
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.row-bg {
  background: #ccc;
  .el-col {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .i-icon {
    margin: 10px;
  }
}
</style>
